<template>
  <div class="Msg">
    <!-- 顶部标题 -->
    <top-title-bar>
      <template #left>
        <div class="left" @click="$router.go(-1)">
          <span class="iconfont icon-xiangzuo1"></span>
          <div class="title">消息</div>
        </div>
      </template>
    </top-title-bar>
    <div class="wrap">
      <van-tabs
        v-model="active"
        offset-top="50px"
        sticky
        swipeable
        color="#0cc85c"
        title-active-color="#14ca61"
        title-inactive-color="#666666"
        @rendered="MsgDataInit"
        @change="changeFun"
      >
        <van-tab title="帖子">
          <main v-if="MsgData8">
            <div class="post-mag-box">
              <router-link
                :to="
                  '/PostDetails?postID=' +
                  item.content.post.postID +
                  '&from=技术分享'
                "
                tag="div"
                class="msg-item"
                v-for="(item, i) in MsgData8"
                :key="i"
              >
                <div class="icon" @click.stop="$router.push('/UserInfos?user_id=' + item.content.user.userID)">
                  <img :src="item.content.user.avatar" alt="" />
                </div>

                <div class="text">
                  <div class="title">
                    <span>{{ item.content.user.nick }}</span
                    ><small>{{ item.content.seq }}楼</small>
                  </div>

                  <div
                    :class="['age', { woman: item.content.user.gender == 1 }]"
                  >
                    <span
                      :class="[
                        'iconfont',
                        item.content.user.gender == 2 ? 'icon-nan' : 'icon-nv',
                      ]"
                      >{{ item.content.user.age }}</span
                    >
                  </div>

                  <div class="time">
                    {{ item.content.createTime | numToYMD }}
                  </div>

                  <div class="reply">
                    <h5>
                      回复我的{{ item.content.refComment ? "话题" : "评论" }}
                    </h5>
                    <p>
                      <span class="text-ellipsis-10">
                        {{ item.content.post.title }}
                      </span>
                    </p>
                  </div>

                  <div
                    class="content text-ellipsis-10"
                    v-html="TextToHtml(HtmlToText(item.content.text))"
                  ></div>

                  <div class="origin reply">
                    <h5 class="text-ellipsis-1">
                      原帖: <span>{{ item.content.post.title }}</span>
                    </h5>
                    <p>
                      板块: <span>{{ item.content.category.title }}</span>
                    </p>
                  </div>
                </div>
              </router-link>
            </div>
            <van-empty
              v-show="MsgData8.length == 0"
              class="custom-image"
              image="./img/empty2.png"
              description="去其他地方看看吧!"
            />
          </main>
        </van-tab>
        <van-tab title="游评">
          <van-empty
            v-show="true"
            class="custom-image"
            image="./img/empty2.png"
            description="去其他地方看看吧!"
          />
        </van-tab>
        <van-tab title="获赞">
          <van-empty
            v-show="true"
            class="custom-image"
            image="./img/empty2.png"
            description="去其他地方看看吧!"
          />
        </van-tab>
        <van-tab title="系统">
          <main class="system" v-if="MsgData1">
            <div class="post-mag-box">
              <div class="msg-item" v-for="(item, i) in MsgData1" :key="i">
                <div class="icon">
                  <img :src="item.content.user.avatar" alt="" />
                </div>

                <div class="text">
                  <div class="title">
                    <span>{{ item.content.user.nick }}</span>
                  </div>

                  <div
                    :class="['age', { woman: item.content.user.gender == 1 }]"
                  >
                    <span
                      :class="[
                        'iconfont',
                        item.content.user.gender == 2 ? 'icon-nan' : 'icon-nv',
                      ]"
                      >{{ item.content.user.age }}</span
                    >
                  </div>

                  <div class="time">
                    {{ item.createTime | numToYMD }}
                  </div>

                  <div
                    class="content text-ellipsis-10"
                    v-html="TextToHtml(HtmlToText(item.content.text))"
                  ></div>
                </div>
              </div>
            </div>
            <van-empty
              v-show="MsgData1.length == 0"
              class="custom-image"
              image="./img/empty2.png"
              description="去其他地方看看吧!"
            />
          </main>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { getMsgData } from "../assets/api/msg.js";
import TopTitleBar from "../components/TopTitleBar.vue";
export default {
  data() {
    return {
      active: 0, //标签按钮下标
      MsgData8: null, //帖子消息数据
      MsgData1: null, //系统消息数据
    };
  },
  methods: {
    // 消息数据初始化
    async MsgDataInit() {
      // 在请求时
      this.$store.commit("showLoading");
      if (this.active == 0) {
        let type_id = 8;
        let start = 0;
        let count = 20;
        let MsgData = await getMsgData({ type_id, start, count });
        this.MsgData8 = MsgData.datas;
        this.$toast.success("拉取成功");
        console.log(this.MsgData8);
      } else if (this.active == 1) {
        this.$toast.success("拉取成功");
      } else if (this.active == 2) {
        this.$toast.success("拉取成功");
      } else if (this.active == 3) {
        let type_id = 1;
        let start = 0;
        let count = 20;
        let MsgData = await getMsgData({ type_id, start, count });
        this.MsgData1 = MsgData.datas;
        this.$toast.success("拉取成功");
        console.log(this.MsgData1);
      }
      // 请求完成后
      this.$store.commit("hideLoading");
    },

    // 标签改变时触发
    changeFun() {
      if (
        (this.active === 0 && !this.MsgData8) ||
        (this.active === 1 && !this.MsgData1)
      )
        this.MsgDataInit();
    },

    // html代码转成字符
    HtmlToText(html) {
      let text = html;
      text = text.split("<text>").join("");
      text = text.split("</text>").join("");
      text = text.split("<image>").join("");
      text = text.split("</image>").join("");
      return text;
    },

    // 字符转成html代码
    TextToHtml(text) {
      let html = "";
      let arr = text.split("\n");
      arr.forEach((str) => {
        html += `<p>${str}</p>`;
      });
      return html;
    },
  },
  components: {
    TopTitleBar,
  },
  filters: {
    // 把数字转成年月日
    numToYMD(val) {
      let y = new Date(val).getFullYear() - 2000 + "年";
      let m = new Date(val).getMonth() + 1 + "月";
      let d = new Date(val).getDate() + "日";
      return y + m + d;
    },
  },
};
</script>

<style lang="scss" scoped>
.Msg {
  min-height: 100%;
  background-color: #fff;
  .TopTitleBar {
    .left {
      display: flex;
      align-items: center;
      .icon-xiangzuo1 {
        font-weight: bold;
        color: #fff;
        font-size: 22px;
      }
    }
    .right {
      .icon-xiaoxi,
      .icon-bianji1 {
        font-weight: bold;
        color: #fff;
        font-size: 22px;
        &.icon-xiaoxi {
          margin-left: 18px;
        }
      }
    }
  }

  main {
    margin-top: 8px;
    margin-top: 0;

    .name-icon {
      display: flex;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.5);
      padding: 0 13px;

      .icon {
        width: 61px;
        height: 61px;
        margin-right: 10px;

        img {
          position: relative;
          border-radius: 5px;
          bottom: 9px;
        }
      }

      h4 {
        height: 32px;
        line-height: 32px;
        color: #1c1c1c;
      }

      .level {
        height: 16px;
        line-height: 16px;
        text-align: center;
        color: #f4fefa;
        font-size: 12px;
        display: flex;
      }

      p {
        width: max-content;
        height: 16px;
        background-color: #12d364;
        border-radius: 4px;
        padding: 0 4px;

        span {
          display: inline-block;
          transform: scale(0.8);
        }

        &:last-child {
          background-color: #1dc8f0;
          margin-left: 5px;

          &::before {
            content: "";
            display: inline-block;
            width: 10px;
            height: 10px;
            background-size: cover;
            transform: scale(0.9);
            position: relative;
            top: 0;
          }
        }
      }

      .right {
        flex: 1;
      }

      .money {
        height: 22px;
        line-height: 22px;
        color: #656565;
        font-size: 12px;
        margin-top: 14px;

        span {
          color: #1e1e1e;
          margin-right: 5px;

          &:last-child {
            margin-left: 15px;
          }
        }
      }
    }

    .num {
      display: flex;
      flex-wrap: wrap;

      a {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        width: calc(100% / 3);
        text-align: center;
        height: 53px;
        font-size: 12px;
        position: relative;

        &::after {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;
          right: 0;
          width: 1px;
          height: 14px;
          background-color: #efefef;
        }

        &:nth-child(3n):after {
          content: none;
        }

        p {
          font-size: 14px;
          color: #000;
          margin-bottom: 4px;
        }

        small {
          color: #737373;
        }
      }
    }

    .head {
      h4 {
        height: 38px;
        line-height: 38px;
        color: #282828;
      }
    }

    .imgs {
      display: flex;
    }

    .info {
      p {
        height: 26px;
        line-height: 26px;
        margin-bottom: 3px;
        font-size: 14px;
        color: #868686;

        &:last-child {
          margin-bottom: 0;
        }

        span {
          color: #6a6a6a;
          margin-left: 12px;
        }
      }
    }

    .node-place {
      margin-top: 15px;
      padding-left: 4px;

      div {
        color: #1e1e1e;
        font-size: 15px;
        height: 33px;
        line-height: 33px;

        span {
          color: #00bf3f;
          margin-left: 11px;
        }
      }
    }

    .user {
      height: 70px;
      border-bottom: 1px solid #eaeaea;
      box-sizing: border-box;
      display: flex;
      padding: 12px;

      .icon {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        overflow: hidden;
      }

      .text {
        flex: 1;
        margin: 0 10px;
      }

      .name {
        height: 25px;
        line-height: 25px;
        font-size: 15px;
        margin-bottom: 2px;
        color: #343434;
      }

      .age {
        background-color: #1dc8f0;
        height: 16px;
        line-height: 16px;
        border-radius: 3px;
        width: max-content;
        color: #fff;
        padding: 0 4px;

        span {
          display: inline-block;
          transform: scale(0.7);
          margin-left: -4px;
        }

        &::before {
          content: "";
          display: inline-block;
          background-size: 10px 81px;
          width: 10px;
          height: 11px;
        }
      }

      p {
        display: block;
        width: 65px;
        height: 25px;
        box-sizing: border-box;
        border: 1px solid #bdbdbd;
        color: #bdbdbd;
        font-size: 12px;
        text-align: center;
        line-height: 25px;
        border-radius: 5px;
        align-self: center;
      }

      &.con {
        p {
          border-color: #0cc85c;
          color: #0cc85c;
        }
      }

      &.woman {
        .age {
          background-color: #f452a2;

          &::before {
            background-size: 10px 81px;
            width: 8px;
            height: 11px;
          }
        }
      }
    }

    .msg-item {
      display: flex;
      padding: 12px;
      border-bottom: 1px solid #e6e6e6;

      &:active {
        opacity: 0.9;
        box-shadow: 0 0 100px 0 inset rgba(0, 0, 0, 0.1);
      }

      .icon {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
      }

      .text {
        flex: 1;
        max-width: calc(100% - 56px);
        margin-left: 10px;
      }

      .title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 2px;

        span {
          display: block;
          color: #343434;
          height: 22px;
          line-height: 22px;
          font-size: 15px;
        }

        small {
          font-size: 12px;
          color: #0cc85c;
        }
      }

      .age {
        background-color: #1dc8f0;
        height: 16px;
        line-height: 16px;
        border-radius: 3px;
        width: max-content;
        color: #fff;
        padding: 0 4px;

        span {
          display: block;
          font-size: 12px;
          display: flex;
          align-items: center;

          &::before {
            display: block;
            margin-right: 2px;
          }
        }
      }

      .woman {
        background-color: #f452a2;
      }

      .time {
        font-size: 12px;
        color: #bebebe;
        height: 28px;
        line-height: 28px;
        margin-bottom: 5px;
      }

      .reply {
        background-color: #f0f0f0;
        padding: 5px 10px;
        border-radius: 4px;

        h5 {
          font-weight: normal;
          color: #969696;
          height: 31px;
          line-height: 31px;
        }

        p {
          color: #646464;
          line-height: 20px;
          padding: 4px 0 5px;
          font-size: 15px;
        }
      }

      .content {
        color: #323232;
        line-height: 20px;
        margin: 11px 0;
        font-size: 15px;
      }

      .origin {
        border: 1px solid #e0e0e0;
      }
    }
  }

  .wrap {
    padding-top: 0;
    ::v-deep .van-sticky {
      border-bottom: 1px solid #f3f3f3;
    }
    main {
      .msg-item:active {
        opacity: 0.9;
        box-shadow: 0 0 100px 0 inset rgba($color: #000000, $alpha: 0.1);
      }
      &.system {
        .msg-item {
          .text {
            .content {
              margin: 0;
            }
          }
        }
      }
    }
  }
  ::v-deep .van-empty__image {
    width: auto;
  }
}
</style>